import { Flex, useColorModeValue } from '@chakra-ui/react';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { memo, useCallback } from 'react';
import { FaTrash } from 'react-icons/fa';
import {
  ControlNetConfig,
  controlNetRemoved,
  controlNetToggled,
} from '../store/controlNetSlice';
import EasyControlNetSelectModal from './parameters/EasyControlNetSelectModal';
import TFParamControlNetWeight from './parameters/TFParamControlNetWeight';

import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIIconButton from 'common/components/IAIIconButton';
import IAISwitch from 'common/components/IAISwitch';

import ControlNetImagePreview from './ControlNetImagePreview';
import TFParamControlNetControlMode from './parameters/TFParamControlNetControlMode';

type ControlNetProps = {
  controlNet: ControlNetConfig;
};

const ControlNet = (props: ControlNetProps) => {
  const { controlNet } = props;
  const { controlNetId } = controlNet;
  const dispatch = useAppDispatch();
  const bg = useColorModeValue('base.900', 'base.800');

  const selector = createSelector(
    stateSelector,
    ({ controlNet }) => {
      const cn = controlNet.controlNets[controlNetId];

      if (!cn) {
        return {
          isEnabled: false,
          shouldAutoConfig: false,
        };
      }

      const { isEnabled, shouldAutoConfig } = cn;

      return { isEnabled, shouldAutoConfig };
    },
    defaultSelectorOptions
  );

  const { isEnabled } = useAppSelector(selector);

  const handleDelete = useCallback(() => {
    dispatch(controlNetRemoved({ controlNetId }));
  }, [controlNetId, dispatch]);

  const handleToggleIsEnabled = useCallback(() => {
    dispatch(controlNetToggled({ controlNetId }));
  }, [controlNetId, dispatch]);

  return (
    <Flex
      sx={{
        flexDir: 'column',
        gap: 3,
        p: 2,
        borderRadius: 'base',
        position: 'relative',
        bg: bg,
      }}
      pos="relative"
    >
      <Flex gap="2" flexDirection="column" pb="1">
        <Flex gap="2" align="center">
          <EasyControlNetSelectModal controlNet={controlNet} />
          <IAISwitch
            tooltip="Toggle this ControlNet"
            aria-label="Toggle this ControlNet"
            isChecked={isEnabled}
            onChange={handleToggleIsEnabled}
          />
        </Flex>
        <Flex gap="2" align="center">
          <Flex
            sx={{
              alignItems: 'center',
              justifyContent: 'center',
              h: 28,
              w: 28,
              aspectRatio: '1/1',
            }}
          >
            <ControlNetImagePreview controlNet={controlNet} isSmall />
          </Flex>
          <Flex flexDirection="column" gap="1">
            <TFParamControlNetControlMode controlNet={controlNet} />
            <TFParamControlNetWeight controlNet={controlNet} />
          </Flex>
        </Flex>
      </Flex>

      <IAIIconButton
        size="sm"
        tooltip="Delete"
        aria-label="Delete"
        colorScheme="error"
        onClick={handleDelete}
        icon={<FaTrash />}
        position="absolute"
        top="-3"
        right="-3"
        bg="transparent"
        sx={{
          svg: {
            fill: 'base.700',
          },
          _hover: {
            bg: 'transparent',
            svg: {
              fill: 'error.600',
            },
          },
        }}
      />
    </Flex>
  );
};

export default memo(ControlNet);
